; (function (window) {
  const hlSecondaryTree = {
    template: `<div class="hl-secondary-tree__container">
        <div class="hl-secondary-tree__firstmenu" v-for="(item,index) in menuData">
          <div class="hl-secondary-tree__node" @click="selectFirstMenu(index)" :class="{'selected':item.isSelect}">
            <p class="hl-secondary-tree__firstmenu-name"
               :style="{ width: firstNodeName.w + 'px'}"
               v-if="!item.isEdit"
            >
               {{item.name}}
            </p>
            <input class="hl-secondary-tree__firstmenu-name-ipt" type="text"
              :style="{ width: firstNodeName.w + 'px'}"
              @blur="saveFirstMenuNode(index)"
              ref="firstmenuIpt"
              v-model="item.name"
              v-if="item.isEdit"
            >
            <i class="el-icon-delete features-node" v-if="del" @click.stop="deleteFirstMenu(index)"></i>
            <i class="el-icon-plus features-node" v-if="add"  @click.stop="addSecondMenu(index)"></i>
            <i class="el-icon-edit features-node" v-if="edit" @click.stop="editFirstMenu(index)"></i>
          </div>

          <ul class="hl-secondary-tree__secondmenu" v-for="(item1,index1) in item.children">
            <li class="hl-secondary-tree__node" @click="selectSecondMenu(index,index1)" :class="{'selected':item1.isSelect}">
              <p class="hl-secondary-tree__secondmenu-name"
                 :style="{ width: secondNodeName.w + 'px'}"
                 v-if="!item1.isEdit"
              >
                {{item1.name}}
              </p>
              <input class="hl-secondary-tree__secondmenu-name-ipt" type="text"
                :style="{ width: secondNodeName.w + 'px'}"
                @blur="saveSecondMenuNode(index,index1)"
                ref="secondmenuIpt"
                v-model="item1.name"
                v-if="item1.isEdit"
              >
              <i class="el-icon-delete features-node" v-if="del" @click.stop="deleteSecondMenu(index,index1)"></i>
              <i class="el-icon-edit features-node" v-if="edit" @click.stop="editSecondMenu(index,index1)"></i>
            </li>
          </ul>

          <div class="hl-secondary-tree__add-wrap" v-show="item.isAdd">
            <input class="hl-secondary-tree__add-ipt" type="text" ref="secondIpt" v-model="addSecondMenuName" @blur="saveSecondMenu(index)">
            <i class="el-icon-delete features-node" @click="cancelAddSecondMenu(index)"></i>
          </div>
        </div>

        <div class="hl-secondary-tree__add-wrap" v-show="firstmenuIptFlag">
          <input class="hl-secondary-tree__add-ipt" type="text" ref="firstIpt" v-model="addFirstMenuName" @blur="saveFirstMenu()" focus>
          <i class="el-icon-delete features-node" @click="cancelAddFirstMenu()"></i>
        </div>
    </div>`,
    data() {
      return {
        firstmenuIptFlag:false,
        firstNodeName:{},
        secondNodeName:{},
        menuData:[],
        addFirstMenuName:null,
        addSecondMenuName:null,
      }
    },
    watch: {

    },
    props: {
      data:{
        type:Array,
        default:() => []
      },
      del: {
        type:Boolean,
        default:false
      },
      edit: {
        type:Boolean,
        default:false
      },
      add: {
        type:Boolean,
        default:false
      },
      isShowFirstMenuIpt:{
        type:Boolean,
        default:false
      }
    },
    components: {

    },
    watch: {
      isShowFirstMenuIpt(val){
        if(val){
          this.$nextTick(() => {
            this.$refs.firstIpt.focus()
          })
        }
        this.firstmenuIptFlag = this.isShowFirstMenuIpt
      },
      data(newVal,oldVal){
        this.initData()
      }
    },
    computed:{
      calFirstNode(){
        let num = 0
        let res = {}
        if(this.del) num ++
        if(this.edit) num ++
        if(this.add) num ++
        // 功能图标所占宽度
        const iconWidth = num * 24
        const outerNodeWidth = document.querySelector('.hl-secondary-tree__node').offsetWidth
        res = { w: outerNodeWidth - iconWidth - 30 }

        return res
      },
      calSecondNode(){
        let num = 0
        let res = {}
        if(this.del) num ++
        if(this.edit) num ++
        // 功能图标所占宽度
        const iconWidth = num * 24
        const outerNodeWidth = document.querySelector('.hl-secondary-tree__node').offsetWidth
        res = { w: outerNodeWidth - iconWidth - 50 }

        return res
      }
    },
    created(){
      this.initData()
    },
    mounted(){
      this.firstNodeName = this.calFirstNode
      this.secondNodeName = this.calSecondNode
      this.firstmenuIptFlag = this.isShowFirstMenuIpt
    },
    methods:{
      initData(){
        let res = JSON.parse(JSON.stringify(this.data))

        res.forEach(el => {
          el['isEdit'] = false
          el['isAdd'] = false
          el['isSelect'] = false
          if(el.children){
            el.children.forEach(el1 => {
              el1['isEdit'] = false
              el1['isSelect'] = false
            })
          }
        })

        this.menuData = res
      },
      selectFirstMenu(i){
        this.menuData.forEach((el,i) => {
          el['isSelect'] = false
          if(el.children){
            el.children.forEach(el1 => {
              el1['isSelect'] = false
            })
          }
        })

        this.$delete(this.menuData[i],'isSelect')
        this.$set(this.menuData[i],'isSelect',true)

      },
      selectSecondMenu(index,index1){
        this.menuData.forEach((el,i) => {
          el['isSelect'] = false
          if(el.children){
            el.children.forEach(el1 => {
              el1['isSelect'] = false
            })
          }
        })

        this.$delete(this.menuData[index]['children'][index1],'isSelect')
        this.$set(this.menuData[index]['children'][index1],'isSelect',true)
      },
      editFirstMenu(i){
        this.$delete(this.menuData[i],'isEdit')
        this.$set(this.menuData[i],'isEdit',true)

        let res = JSON.parse(JSON.stringify(this.menuData[i]))
        delete res['isEdit']
        delete res['children']

        let data = {
          oneIndex:i,
          cur:res,
          data:this.menuData
        }

        this.$emit('on-edit-first-node' , data)
      },
      editSecondMenu(index,index1){
        this.$delete(this.menuData[index]['children'][index1],'isEdit')
        this.$set(this.menuData[index]['children'][index1],'isEdit',true)

        this.$nextTick(() => {
          this.$refs.secondmenuIpt[index1].focus()
        })

        let res = JSON.parse(JSON.stringify(this.menuData[index]['children'][index1]))
        delete res['isEdit']

        let data = {
          oneIndex:index,
          twoIndex:index1,
          cur:res,
          data:this.menuData
        }

        this.$emit('on-edit-second-node' , data)
      },
      deleteFirstMenu(i){
        let res = JSON.parse(JSON.stringify(this.menuData[i]))
        delete res['isEdit']
        delete res['children']

        let data = {
          oneIndex:i,
          cur:res,
          data:this.menuData
        }

        this.$emit('on-delete-first-node' , data)
      },
      deleteSecondMenu(index,index1){
        let res = JSON.parse(JSON.stringify(this.menuData[index]['children'][index1]))
        delete res['isEdit']

        let data = {
          oneIndex:index,
          twoIndex:index1,
          cur:res,
          data:this.menuData
        }

        this.$emit('on-delete-second-node' , data)
      },
      saveFirstMenuNode(i){
        this.$delete(this.menuData[i],'isEdit')
        this.$set(this.menuData[i],'isEdit',false)

        let res = JSON.parse(JSON.stringify(this.menuData[i]))
        delete res['isEdit']
        delete res['children']

        let data = {
          oneIndex:i,
          cur:res,
          data:this.menuData
        }

        this.$emit('on-save-first-node' , data)
      },
      saveSecondMenuNode(index,index1){
        let res = JSON.parse(JSON.stringify(this.menuData[index]['children'][index1]))
        delete res['isEdit']

        let data = {
          oneIndex:index,
          twoIndex:index1,
          cur:res,
          data:this.menuData
        }
        this.$emit('on-save-second-node' , data)
      },
      addSecondMenu(i){
        this.$delete(this.menuData[i],'isAdd')
        this.$set(this.menuData[i],'isAdd',true)
        this.$nextTick(() => {
          this.$refs.secondIpt[i].focus()
        })
      },
      // 保存新增的二级菜单
      saveSecondMenu(index){
        let data = {
          name:this.addSecondMenuName,
          oneIndex:index,
          data:this.menuData
        }

        this.$emit('on-add-second-node' , data)
        this.cancelAddSecondMenu()
      },
      cancelAddSecondMenu(i){
        this.addSecondMenuName = null
        this.$delete(this.menuData[i],'isAdd')
        this.$set(this.menuData[i],'isAdd',false)
      },
      // 保存新增的一级菜单
      saveFirstMenu(){
        this.$emit('on-add-one-node' , this.addFirstMenuName , this.menuData)
        this.cancelAddFirstMenu()
      },
      cancelAddFirstMenu(){
        this.addFirstMenuName = null
        this.firstmenuIptFlag = false
      },
    }
  }

  Vue.component('hl-secondary-tree', hlSecondaryTree)

}(window))
